<html>
<head>
    <meta charset="utf-8">
    <title>列表标签</title>
</head>
<body>
    <!-- 表单标签 -->
    <h1>
        <center>手机商城</center>
    </h1>
    <hr>
    <p>欢迎光临！</p>
    <h2>
        <!--- input标签的使用--->
        手机查询
    </h2>
    <!-- <form>...</form>：定义一个表单 -->
    <form>
        <!---form内的action属性是将来的提交地址-->
        手机名称：<input type="“text”" placeholder="请输入手机名称">
        <br>
        <!-- <input>：定义表单中的输入字段 -->
        手机品牌：
        <input type="radio" name="品牌" checked>HUAWEI
        <!---给value属性设置为yes 加上checked就设置为默认勾选-->
        <input type="radio" name="品牌">小米
        <input type="radio" name="品牌">OPPO
        <input type="radio" name="品牌">荣耀
        <br>

        价格范围：
        <input type="checkbox" name="价格" value="“yes”" checked=""> 1000以下
        <input type="checkbox" name="价格" value="yes" checked=""> 1000~2000
        <input type="checkbox" name="价格" value="yes" checked=""> 2000~3000
        <input type="checkbox" name="价格" value="yes" checked=""> 3000以上
        <br>

        <!-- <select>...</select>：定义下拉列表框。 -->
        <!-- <option>...</option>：定义下拉列表框中的选项。 -->
        <select>
            <option> 河北省 </option>
            <option> 河南省 </option>
            <option> 安徽省 </option>
            <option> 江苏省 </option>
            <option> 甘肃省 </option>
            <option> 山东省 </option>
            <option> 四川省 </option>
            <option> 海南省 </option>
            <option> 湖南省 </option>
            <option selected> 江西省 </option>
            <!-- selected默认选中 -->
            <option> 山西省 </option>
            <option> 辽宁省 </option>
            <option> 吉林省 </option>
            <option> 黑龙江省 </option>
            <option> 福建省 </option>
            <option> 浙江省 </option>
            <option> 云南省 </option>
            <option> 广东省 </option>
            <option> 贵州省 </option>
            <option> 青海省 </option>
            <option> 台湾省 </option>
            <option> 陕西省 </option>
            <option> 湖北省 </option>
                  </select>


        </select>
        <br>
        图片识别：<input type="file" multiple="">
        <!---multiple多文件上传选择-->
        <br>
        <input type="reset" value="重置">
        <!-- 全部清空 后续需要部分内容清空 -->
        <input type="submit" value="查询">

    </form>


    <br>
    <h2>手机列表</h2>
    <!---无序标签--->
    <ul>
        <li>HUAWEI MATE60PRO</li>
        <li>小米13</li>
        <li>iqqo neo9</li>
    </ul>

    <!---有序标签--->
    <h2>手机热度排行</h2>
    <ol>
        <li>HUAWEU MATE60PRO</li>
        <li>一加ace2pro</li>
        <li>红米k60pro</li>
    </ol>

    <table>
        <caption>
            品牌热门
        </caption>
        <thead>
            <tr>
                <th>华为</th>
                <th>小米</th>
                <th>OPPO</th>
                <th>荣耀</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    HUAWEI MATE60PRO
                </td>
                <td>
                    小米14
                </td>
                <td>
                    一加ace2pro
                </td>
                <td>
                    荣耀70
                </td>
            </tr>
            <tr>
                <td>
                    HUAWEI MATEX5
                </td>
                <td>
                    红米k60pro
                </td>
                <td>
                    OPPO FindN3Flip
                </td>
                <td>
                    荣耀X50
                </td>
            </tr>
            <tr>
                <td>
                    HUAWEI P60PRO
                </td>
                <td>
                    小米平板6pro
                </td>
                <td>
                    OPPO Reno10
                </td>
                <td>
                    荣耀80GT
                </td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>
                    遥遥领先
                </td>
                <td>
                    为发烧而生
                </td>
                <td>
                    绿厂
                </td>
                <td>
                    HONOR
                </td>
            </tr>
        </tfoot>

    </table>




    <!---自定义标签--->
    <dl>
        <dt>
            服务中心
        </dt>

        <dd>寄修服务</dd>
        <dd>寄修服务</dd>
        <dd>客服中心</dd>
    </dl>


    <!--- --->
</body>

</html>